<!DOCTYPE html>
<html>
	<head>
		<title>Home</title>
		<!--bootstarp-css-->
		<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<!--/bootstarp-css -->
		<!--css-->
		<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
		<link href="../css/hover.css" rel="stylesheet" media="all">
		<!--/css-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Petcare Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/modernizr.custom.js"></script>
		<script src="../js/responsiveslides.min.js"></script>
		<script>
			// You can also use "$(window).load(function() {"
			$(function() {
				$("#slider2").responsiveSlides({
					auto: true,
					pager: true,
					speed: 300,
					namespace: "callbacks",
				});
			});
		</script>
		<style>
			#yincan {
				width: 160px;
				height: 110px;
				position: absolute;
				top: 70px;
				right: 46px;
				background-color: #fff;
				display: none;
			}

			.petdetail {
				width: 970px;
				height: 800px;
				margin: 55px auto 0;
			}

			.imgshow {
				width: 293px;
				height: auto;
				padding: 5px;
				border: 1px #ccc solid;
				float: left;
				display: inline-block;
			}

			.imgshow img {
				width: 280px;
				height: 200px;
				display: inline-block;
			}

			.xx-list {
				width: 69%;
				height: 200px;
				display: inline-block;

			}

			.xx-list h2 {
				margin: 5px 0 5px 20px;
			}

			.petinfo {
				list-style: none;
				display: inline;
			}

			.petinfo li {
				float: left;
				width: 199px;
				margin: 10px 0 10px 10px;
			}

			.plf,
			.prg {
				display: inline-block;
			}

			.plf {
				width: 80px;
				height: 30px;
				/* border: 1px #ccc solid; */
				text-align: center;
				line-height: 30px;
				background-color: #0c868785;
				border-radius: 25px;
				color: #fff;
			}

			.prg {
				margin-left: 5px;
			}

			.scoreshow {
				margin-top: 40px;
				width: 100%;
				height: auto;
			}

			.info3 {
				width: 100%;
				margin-top: 15px;
				height: 200px;
				text-align: center;
			}

			.info3>div {
				float: left;
				width: 300px;
				height: 60px;
				text-align: left;
				margin-left: 20px;
			}

			.info3>div>input {
				width: 30px;
				height: 26px;
				text-align: center;
				border: none;
			}

			.info3>div>span {
				float: left;
				color: #999;
			}

			.progress {
				width: 200px;
				height: 24px;
				position: relative;
			}

			.progress input {
				display: inline-block;
				position: absolute;
				outline: none;
				border: none;
				width: 30px;
				color: #fff;
				background: transparent;

			}

			.progress-bar-success {
				background-color: #0c868785;
			}

			.xntj {
				color: #999;
				font-size: 24px;
				margin: 0 auto;
				width: 100px;
			}

			.tjcw {
				outline: none;
				list-style: none;
			}

			.tjcw li {
				float: left;
				margin: 0 10px;
			}

			.lidiv {
				width: 239px;
				height: 178px;
				position: relative;
				overflow: hidden;
				display: flex;
				display: flex;
				justify-content: center;
			}

			.lidiv img {
				min-width: 100%;
				height: 100%;
				-webkit-flex-shrink: 0;
				flex-shrink: 0;
			}

			.txtdiv {
				text-align: center;
				margin-top: 8px;
				height: 40px;
				overflow: hidden;
			}

			.txtdiv a {
				display: inline-block;
				font-size: 18px;
				color: #222;
				line-height: 40px;
				position: relative;
			}

			.tjcwinfo {
				width: 90%;
				height: auto;
				margin: 0 auto;
			}
			}
		</style>
	</head>
	<body>
		<!--header-->
		<div class="header">
			<div class="header-info">
				<div class="container">
					<div class="logo">
						<a href="index.html"><img src="../images/logo-pet.png" style="position: absolute;width: 330px;height: 262px;top: -60px;left: 280px;"/></a>
					</div>
					<div class="search-box">
						<form>
							<input type="text" name="s" class="textbox" placeholder="Search" required="">
							<input type="submit" value="">
						</form>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="header-bottom">
				<div class="menu">
					<span class="menu-info"> </span>
					<ul class="cl-effect-21">
						<li id="oneser"><a id="service" href="index.html" class="active">服务中心</a>
							<div id="yican">
								<div>
									<p><a href="adopt.html">宠物领养</a></p>
									<p><a href="farmed.html">宠物寄养</a></p>
									<p><a href="notice.html">寻宠|招领</a></p>
								</div>
							</div>
						</li>
						<li><a href="petbaike.html">宠物百科</a></li>
						<li><a href="news.html">宠物新闻</a></li>
						<li><a href="bbs.html">宠物论坛</a></li>
						<li><a>关于我们</a></li>
						<li id="twoser">
							<a id="myme">个人中心</a>
							<div id="yincan">
								<div>
									<p><a href="myinfo.html">我的</a></p>
									<p><a id="overpet">注销</a></p>
								</div>
							</div>
						</li>
					</ul>
				</div>

				<!--yican -->
				<script>
					$("#service").mouseenter(function() {
						$("#yican").css("display", "block");
					});
					$("#oneser").mouseleave(function() {
						$("#yican").css("display", "none");
					});
					$("#myme").mouseenter(function() {
						$("#yincan").css("display", "block");
					});
					$("#twoser").mouseleave(function() {
						$("#yincan").css("display", "none");
					});
					//注销
					$("#overpet").click(function() {
						if (!confirm('是否确定注销该用户并退出登录？'))
							return;
						$.post('http://localhost:80/ct/remove', function(res) {
							if (res) {
								location.href = 'login.html';
							}
						});
					})
				</script>
				<!-- /yican -->
				<!--script-nav -->
				<script>
					$("span.menu-info").click(function() {
						$("ul.cl-effect-21").slideToggle("slow", function() {});
					});
				</script>
				<!-- /script-nav -->
				<div class="clearfix"> </div>
			</div>
		</div>
		<!--/header-->


		<div class="petdetail">
			<div class="imgshow">
				<img src="../images/bgq.jpg" class="petimg"/>
			</div>
			<!-- 基本信息 -->
			<div class="xx-list">
				<h2 class="zwm">挪威猎鹿犬</h2>
				<ul class="petinfo">
					<li>
						<p class="plf">中文名</p>
						<p class="prg zwm"><span>挪威猎鹿犬</span></p>
					</li>
					<li>
						<p class="plf">别名</p>
						<p class="prg bm"><span>挪威黑猎鹿犬</span></p>
					</li>
					<li>
						<p class="plf">原产地</p>
						<p class="prg ycd"><span>挪威</span></p>
					</li>
					<li>
						<p class="plf">毛长</p>
						<p class="prg mc"><span>长毛</span></p>
					</li>
					<li>
						<p class="plf">体型</p>
						<p class="prg tx"><span>中型</span></p>
					</li>
					<li>
						<p class="plf">身高</p>
						<p class="prg sg"><span>49-52cm</span></p>
					</li>
					<li>
						<p class="plf">体重</p>
						<p class="prg tz"><span>20-23kg</span></p>
					</li>
					<li>
						<p class="plf">寿命</p>
						<p class="prg sm"><span>12-15年</span></p>
					</li>
					<li>
						<p class="plf">智商排名</p>
						<p class="prg"><span>NO.<span class="zs">36</span></span></p>
					</li>
				</ul>
			</div>
			<!-- 评分详情· -->
			<div class="scoreshow">
				<form action="#" method="post" enctype="multipart/form-data">
					<div class="aui-info info3">
						<div>
							<span>粘人程度：</span>
							<div class="progress">
								<input id="nr" value="30" />
								<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
									aria-valuemin="0" aria-valuemax="100" style="width: 80%">
								</div>
							</div>
						</div>
						<div>
							<span>喜叫程度：</span>
							<div class="progress">
								<input id="xj" value="30" />
								<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
									aria-valuemin="0" aria-valuemax="100" style="width: 60%">
								</div>
							</div>
						</div>
						<div>
							<span>友善程度：</span>
							<div class="progress">
								<input id="ys" value="30" />
								<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
									aria-valuemin="0" aria-valuemax="100" style="width: 40%">
								</div>
							</div>
						</div>
						<div>
							<span>掉毛程度：</span>
							<div class="progress">
								<input id="dm1" value="30" />
								<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
									aria-valuemin="0" aria-valuemax="100" style="width: 90%">
								</div>
							</div>
						</div>
						<div>
							<span>美容程度：</span>
							<div class="progress">
								<input id="mr" value="30" />
								<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
									aria-valuemin="0" aria-valuemax="100" style="width: 70%">
								</div>
							</div>
						</div>
						<div>
							<span>体味程度：</span>
							<div class="progress">
								<input id="tw" value="30" />
								<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
									aria-valuemin="0" aria-valuemax="100" style="width: 55%">
								</div>
							</div>
						</div>
						<div>
							<span>口水程度：</span>
							<div class="progress">
								<input id="ks1" value="30" />
								<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
									aria-valuemin="0" aria-valuemax="100" style="width: 33%">
								</div>
							</div>
						</div>
						<div>
							<span>可训程度：</span>
							<div class="progress">
								<input id="kx" value="30" />
								<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
									aria-valuemin="0" aria-valuemax="100" style="width: 44%">
								</div>
							</div>
						</div>
						<div>
							<span>活跃程度：</span>
							<div class="progress">
								<input id="hy" value="30" />
								<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
									aria-valuemin="0" aria-valuemax="100" style="width: 88%">
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>

			<!-- 向你推荐-->
			<div class="">
				<div class="xntj">向你推荐</div>
				<input type="hidden" id="types" value=""/>
				<div class="tjcwinfo">
					<ul class="tjcw">
						<li>
							<div class="lidiv">
								<a><img src="../images/3.jpg" alt="挪威猎鹿犬"></a>
							</div>
							<div class="txtdiv"><a href=""><em>挪威猎鹿犬</em></a></div>
						</li>
						<li>
							<div class="lidiv">
								<a><img src="../images/3.jpg" alt="挪威猎鹿犬"></a>
							</div>
							<div class="txtdiv"><a href=""><em>挪威猎鹿犬</em></a></div>
						</li>
						<li>
							<div class="lidiv">
								<a><img src="../images/3.jpg" alt="挪威猎鹿犬"></a>
							</div>
							<div class="txtdiv"><a href=""><em>挪威猎鹿犬</em></a></div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--footer-->
		<div class="footer">
			<div class="container">
				<div class="copy-rights">
					<p>Copyright &copy; 2023.Company <a target="_blank" href="index.html">you宠</a></p>
				</div>

			</div>
		</div>
		<!--/footer-->
		<script type="text/javascript">
			$(function(){
				let temp = new URLSearchParams(location.search);
				let bid = temp.get("bid"); //c宠物品种编号	
				
				//显示品种信息
				petinfo();
				function petinfo(){
					$.post('http://localhost:80/ct/petinfoOne', {"bid": bid},function(r){
						$(".zwm").text(r.bname);
						$(".bm").text(r.nickname);
						$(".ycd").text(r.origin);
						$(".mc").text(r.hairlen);
						$(".tx").text(r.shape);
						$(".sg").text(r.height);
						$(".tz").text(r.weight);
						$(".sm").text(r.life);
						$(".zs").text(r.iq);
						$("#types").val(r.btype);
						$(".petimg").attr("src","../images/"+r.bfile+"");
						//向我推荐
						tjpetinfo();
					},"json");
				}
			
			    //显示评分
				scoreshow();
				function scoreshow(){
					$.post('http://localhost:80/ct/petscore', {"bid": bid},function(r){
						$("#nr").val(r.sticky);
						$("#nr").next().css("width",r.sticky+"%");
						$("#xj").val(r.yell);
						$("#xj").next().css("width",r.yell+"%");
						$("#ys").val(r.friendly);
						$("#ys").next().css("width",r.friendly+"%");
						$("#dm1").val(r.hairloss);
						$("#dm1").next().css("width",r.hairloss+"%");
						$("#mr").val(r.beauty);
						$("#mr").next().css("width",r.beauty+"%");
						$("#tw").val(r.odor);
						$("#tw").next().css("width",r.odor+"%");
						$("#ks1").val(r.spit);
						$("#ks1").next().css("width",r.spit+"%");
						$("#kx").val(r.teachable);
						$("#kx").next().css("width",r.teachable+"%");
						$("#hy").val(r.active);
						$("#hy").next().css("width",r.active+"%");
					},"json");
				}
			     
			   function tjpetinfo(){
				   $.post('http://localhost:80/ct/tjpetinfo',{"types":$("#types").val()},function(r){
				      $(".tjcw").children().remove();
					  $(r.records).each(function(i,e){
						let lis ="<li>"+
							"<div class='lidiv'>"+
								"<a href='petdetail.html?bid="+e.bid+"'><img src='../images/"+e.bfile+"' alt='"+e.bname+"'></a>"+
							"</div>"+
							"<div class='txtdiv'><a href='petdetail.html?bid="+e.bid+"'><em>"+e.bname+"</em></a></div>"+
						"</li>";
						$(".tjcw").append(lis);
					  })
				   },"json");
			   }
			
			})
		</script>
	</body>
</html>